<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加评论</title>
    <script type="text/javascript">

    </script>
</head>
<body>
<script type="text/javascript">
    var arrSrc = [];//初始一个数组存放图片路径
    $(function() {

        $('#commentEditForm').form({
            url : '${path }/comment/edit.do',
            onSubmit : function() {
                progressLoad();
                var isValid = $(this).form('validate');
                if (!isValid) {
                    progressClose();
                }
                return isValid;
            },
            success : function(result) {
                progressClose();
                console.log(result);
                result = $.parseJSON(result);
                console.log(result);
                if (result.success) {
                    console.log("success");
                    $('#commentEditFormPage').dialog('close');
                    reloadCommentDataGrid();
                } else {
                    var form = $('#commentEditForm');
                    $.messager.alert('提示', result.msg, 'warning');
                }
            }
        });
        
    });

    $("#isRecommend").val(${userComment.isRecommend});
    $("#status").val(${userComment.status});
</script>
<style>
    .dragItemBox{
        position: relative;margin-right: 10px;margin-top: 5px;float: left;
    }
</style>
<div style="padding: 3px;">
    <form id="commentEditForm" method="post">
        <table class="grid">

            <<input type="hidden" name="id" value="${userComment.id}" >
            <tr>
                <td>虚假</td>
                <td>
                    <c:if test="${userComment.isDummy == 0}">
                        <span>否</span>
                    </c:if>
                    <c:if test="${userComment.isDummy == 1}">
                        <span>是</span>
                    </c:if>
                </td>
            </tr>
            <tr>

                <td>用户</td>
                <td>
                    <span>${userComment.username}</span>
                </td>

                <td>头像</td>
                <td>

                    <img id="logoUrl" src="${userComment.headurl}" height="80" width="80">

                </td>



            </tr>
            <tr>
                <td>商家</td>
                <td>

                    <span>${userComment.sellerName}</span>
                </td>

                <td>产品</td>
                <td>
                    <span>${userComment.productName}</span>
                </td>
            </tr>
            <tr>
                <td>评论内容</td>
                <td colspan="3">
                    <textarea name="content" rows="5" cols="80">${userComment.content}</textarea>
                </td>
            </tr>


            <tr>
                <td>评论图片</td>
                <td colspan="3">
                    <div id="upload_ue3"></div>
                    <input type="hidden" id="hospitalGroupInput" name="imgsUrl">
                    <div id="hospitalGroup">

                    </div>
                    <input type="button" onclick="upImageGroup();" value="上传图片">
                </td>

            </tr>

            <tr>
                <td>机构服务分</td>
                <td><input name="organizationSeiviceScore" value="${userComment.organizationSeiviceScore}"  class="easyui-numberspinner" style="width: 140px; height: 29px;" required="required" data-options="editable:true ,min:0,max:5"></td>
                <td>机构环境分</td>
                <td><input name="organizationEnvironmentScore" value="${userComment.organizationEnvironmentScore}"  class="easyui-numberspinner" style="width: 140px; height: 29px;" required="required" data-options="editable:true,min:0,max:5"></td>


            </tr>
            <tr>
              <td>机构速度分</td>
                <td><input name="organizationSpeedScore" value="${userComment.organizationSpeedScore}"  class="easyui-numberspinner" style="width: 140px; height: 29px;" required="required" data-options="editable:true,min:0,max:5"></td>

                <td>推荐</td>
                <td>
                    <select name="isRecommend" id="isRecommend"  class="easyui-combobox" data-options="width:140,height:29,editable:false,panelHeight:'auto'">
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </td>
            </tr>


            <tr>
                <td>回复内容</td>
                <td colspan="3">
                    <textarea name="replyContent" rows="5" cols="80">${userComment.replyContent}</textarea>
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <select name="status" id="status" class="easyui-combobox" data-options="width:140,height:29,editable:false,panelHeight:'auto'">
                        <option value="1">启用</option>
                        <option value="0">停用</option>
                    </select>
                </td>

            </tr>
        </table>
    </form>
    <script type="text/javascript">

        <%--var _editor;--%>
        <%--$(function() {--%>
            <%--//重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件--%>
            <%--_editor = UE.getEditor('upload_ue',{--%>
                <%--serverUrl:"${path}/file/upload.do?compress=1"--%>
            <%--});--%>

            <%--_editor.ready(function () {--%>
                <%--//设置编辑器不可用--%>
                <%--// _editor.setDisabled();--%>
                <%--//隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏--%>
                <%--_editor.hide();--%>
                <%--//侦听图片上传--%>
                <%--_editor.addListener('beforeInsertImage', function (t, arg) {--%>
                    <%--//有多少张图片arg.length就是多大--%>
                    <%--$("#picture").val(arg[0].src);--%>
                    <%--$("#logoUrl").attr('src',arg[0].src);--%>
                <%--});--%>
            <%--});--%>
        <%--});--%>
        <%--//弹出图片上传的对话框--%>
        <%--function upImage() {--%>
            <%--var myImage = _editor.getDialog("insertimage");--%>
            <%--myImage.open();--%>
        <%--}--%>



        //============================================多图============================================
        <%--删除图片点击事件--%>

        var imgsString= "${imgsString}";
        if(imgsString){
            var arr = imgsString.substring(0,imgsString.length-1).split(",");
            var arr2 = [];
            arr.map(function(ele,index){
                arr2.push({src:ele})
            });
            addImgGroup(arr2);
        };

        function deteleImgGroup(obj){
            // var src = $(obj).prev().attr("src");
            var index = $(obj).parent().index();
            $(obj).parent().remove();
            arrSrc.splice(index,1);
            $("#hospitalGroupInput").val(arrSrc.join(','));
        }
        function addImgGroup(arg) {
            arg.map(function(ele,index){
                $("#hospitalGroup").append(
                    '<div class="dragItemBox">'+
                    '<img src="'+ele.src+'" alt="商家图片" style="max-width:150px;max-height: 150px;border: 1px solid #eeeeee;">'+
                    '<span class="imgDelete" onclick="deteleImgGroup(this)">x</span>'+
                    '</div>'
                );
                arrSrc.push(ele.src);
            });
//                        每次上传事件触发都重新绑定拖拽事件
            $('.dragItemBox').unbind('draggable');

            $('.dragItemBox').draggable({
                deltaX:0,
                deltaY:0
            }).droppable({
                onDrop:function(e,source){
                    $(source).after(this);
                    $(source).removeAttr('style').siblings().removeAttr('style');
//                                顺序修改后需要重新修改上传的input值

                    arrSrc = [];
                    $(this).parent().find('.dragItemBox img').each(function(){
                        arrSrc.push($(this).attr('src'));
                    });
                    $("#hospitalGroupInput").val(arrSrc.join(","));


                }
            });


            $("#hospitalGroupInput").val(arrSrc.join(","));
        }

        var _editor3;
        //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
        _editor3 = UE.getEditor('upload_ue3',{
            serverUrl:"${path}/file/upload.do?compress=1"
        });


        _editor3.ready(function () {
            //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
            _editor3.hide();
            //侦听图片上传
            _editor3.addListener('beforeInsertImage', function (t,arg) {
                arg.map(function(ele,index){
                    $("#hospitalGroup").append(
                        '<div class="dragItemBox">'+
                        '<img src="'+ele.src+'" alt="商家图片" style="max-width:150px;max-height: 150px;border: 1px solid #eeeeee;">'+
                        '<span class="imgDelete" onclick="deteleImgGroup(this)">x</span>'+
                        '</div>'
                    );
                    arrSrc.push(ele.src);
                });
//                        每次上传事件触发都重新绑定拖拽事件
                $('.dragItemBox').unbind('draggable');

                $('.dragItemBox').draggable({
                    deltaX:0,
                    deltaY:0
                }).droppable({
                    onDrop:function(e,source){
                        $(source).after(this);
                        $(source).removeAttr('style').siblings().removeAttr('style');
//                                顺序修改后需要重新修改上传的input值

                        arrSrc = [];
                        $(this).parent().find('.dragItemBox img').each(function(){
                            arrSrc.push($(this).attr('src'));
                        });
                        $("#hospitalGroupInput").val(arrSrc.join(","));


                    }
                });


                $("#hospitalGroupInput").val(arrSrc.join(","));
            });
        });
        //弹出单张图片上传的对话框
        function upImageGroup(){
            var myImage = _editor3.getDialog("insertimage");
            myImage.open();
        }








    </script>
</div>
</body>
</html>